<template>
  <div class="interaction-details">
    <crumb />
    <div class="container">
      <div class="box-left">
        <div class="section">
          <div class="title">
            {{scoreData.resourceCaseName}}
            <div class="sm-group" v-if="type === 'person'"><span class="sm">小组：{{scoreData.stuGroupName}}</span>  <span class="sm">平均分：{{scoreData.score}}</span></div>
            <div class="sm-group" v-else><span class="sm">小组：{{scoreData.stuGroupName}}</span>  <span class="sm">环节：{{scoreData.caseNodeNameEn}}</span></div>
          </div>
          <div class="content">
            {{scoreData.requestEn}}
          </div>
        </div>
        <div class="section">
          <div class="my" v-if="type==='person'&&!isMy">
            <div class="item">小组名称：{{scoreData.stuGroupName}}</div>
            <div class="item">环节名称：{{scoreData.caseNodeName}}</div>
            <div class="item">平评分：{{scoreData.score}}</div>
            <el-button type="primary" size="small" @click="personScoreShow">查看我的评分</el-button>
          </div>
          <div class="list-box">
            <ul v-if="type === 'person'">
              <li class="row" v-for="(item, index) in scoreData.personScoreLookStuGroups" :key="index" @click="clickHandle(item.personScoreId)">
                <div class="name">
                  <img :src="item.headImgUrl" alt=""/>{{item.stuName}}
                </div>
                <div class="score">{{item.totalScore}}分</div>
              </li>
            </ul>
            <ul v-else>
              <li v-for="(item, index) in scoreData.groupIndex" :key="index" @click="showInfo(item.caseScoreId)">评分组：{{item.stuGroupName}}<span class="right-arrow">{{item.totalScore}}分></span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="box-right">
        <div class="title" v-if="type==='my'">
          评分组：{{scoreInfo.markStuGroupName}} <div class="score">平均分: {{scoreInfo.totalScore}}分</div>
        </div>
        <div class="title" v-else-if="type==='ta'">
          被评分组： {{scoreInfo.by=MarkStuGroupName}} <div class="score">平均分: {{scoreInfo.totalScore}}分</div>
        </div>
        <div class="title" v-else>
          {{isMy?'评分':'得分'}}明细 <div class="score">平均分: {{scoreInfo.totalScore}}分</div>
        </div>
        <div class="section">
          <div class="row" v-for="(item, index) in scoreDetail" :key="index">
            <div class="label">{{item.evaluateItem}}</div>
            <div class="value">{{item.evaluateItemScore}}分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nodeByMark, nodeByMarkDetail, nodeMark, nodeMarkDetail, personScoreLook, personScoreLookDetail, personMarkLook, personMarkLookDetail } from '@/api/student/training/interaction'
export default {
  name: 'interaction-details',
  data () {
    return {
      type: '', // my 所在小组 ta 其他小组
      scoreData: '',
      scoreInfo: '',
      scoreDetail: '',
      isMy: false
    }
  },
  components: {
  },
  async mounted () {
    this.type = this.$route.query.type
    if (this.type === 'my') {
      await this.nodeByMark()
      if (this.scoreData.groupIndex.length > 0) {
        this.nodeByMarkDetail(this.scoreData.groupIndex[0].caseScoreId)
      }
    } else if (this.type === 'ta') {
      await this.nodeMark()
      if (this.scoreData.groupIndex.length > 0) {
        this.nodeMarkDetail(this.scoreData.groupIndex[0].caseScoreId)
      }
    } else {
      await this.personScoreLook() // 个人得分查看
      if (this.scoreData.personScoreLookStuGroups.length > 0) {
        this.personScoreLookDetail(this.scoreData.personScoreLookStuGroups[0].personScoreId)
      }
    }
  },
  methods: {
    async nodeByMark () {
      let res = await nodeByMark(
        {
          lessonICaseId: this.$route.query.lessonICaseId, // 课程案例id
          caseNodeId: this.$route.query.caseNodeId, // 节点id
          groupId: this.$route.query.groupId // 我的学生小组id
        }
      )
      if (res.code === '200') {
        this.scoreData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async nodeByMarkDetail (caseScoreId) {
      let res = await nodeByMarkDetail(
        {
          caseScoreId: caseScoreId, // 评分表id
          caseNodeId: this.scoreData.caseNodeId // 节点id
        }
      )
      if (res.code === '200') {
        this.scoreInfo = res.data
        this.scoreDetail = JSON.parse(res.data.scoreDetail)
      } else {
        this.$message.error(res.message)
      }
    },
    async nodeMark () {
      let res = await nodeMark(
        {
          lessonICaseId: this.$route.query.lessonICaseId, // 课程案例id
          caseNodeId: this.$route.query.caseNodeId, // 节点id
          groupId: this.$route.query.groupId // 我的学生小组id
        }
      )
      if (res.code === '200') {
        this.scoreData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async nodeMarkDetail (caseScoreId) {
      let res = await nodeMarkDetail(
        {
          caseScoreId: caseScoreId, // 评分表id
          caseNodeId: this.scoreData.caseNodeId // 节点id
        }
      )
      if (res.code === '200') {
        this.scoreInfo = res.data
        this.scoreDetail = JSON.parse(res.data.scoreDetail)
      } else {
        this.$message.error(res.message)
      }
    },
    async personScoreLook () {
      let res = await personScoreLook(
        {
          lessonICaseId: this.$route.query.lessonICaseId // 案例id
        }
      )
      if (res.code === '200') {
        console.log(res)
        this.scoreData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async personScoreLookDetail (personScoreId) {
      let res = await personScoreLookDetail(
        {
          personScoreId: personScoreId // 学生个人评分表id
        }
      )
      if (res.code === '200') {
        this.scoreInfo = res.data
        this.scoreDetail = JSON.parse(res.data.scoreDetail)
      } else {
        this.$message.error(res.message)
      }
    },
    async personMarkLook () {
      let res = await personMarkLook(
        {
          lessonICaseId: this.$route.query.lessonICaseId // 课程案例id
        }
      )
      if (res.code === '200') {
        this.scoreData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async personMarkLookDetail (personScoreId) {
      let res = await personMarkLookDetail(
        {
          personScoreId: personScoreId // 学生个人评分表id
        }
      )
      if (res.code === '200') {
        this.scoreInfo = res.data
        this.scoreDetail = JSON.parse(res.data.scoreDetail)
      } else {
        this.$message.error(res.message)
      }
    },
    showInfo (caseScoreId) {
      if (this.type === 'my') {
        this.nodeMark(caseScoreId)
      } else {
        this.nodeMarkDetail(caseScoreId)
      }
    },
    personScoreShow () {
      this.isMy = true
      this.personMarkLook()
      if (this.scoreData.personScoreLookStuGroups.length > 0) {
        this.personMarkLookDetail(this.scoreData.personScoreLookStuGroups[0].personScoreId)
      }
    },
    clickHandle (personScoreId) {
      if (this.isMy) {
        this.personMarkLookDetail(personScoreId)
      } else {
        this.personScoreLookDetail(personScoreId)
      }
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.interaction-details {
  .container {
    display: flex;
    justify-content: space-between;
    .box-left {
      width: 630px;
      background: #fff;
      padding: 15px;
      .section {
        .title {
          font-size: 14px;
          font-weight: bold;
          position: relative;
          .sm-group {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
            font-weight: initial;
            color: #828282;
          }
        }
        .content {
          color: #BBBBBB;
          font-size: 14px;
          padding:20px 0;
          line-height: 1.2;
        }
        .my {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px;
          font-size: 14px;
        }
        .list-box {
          margin-top: 20px;
          ul {
            li {
              line-height: 60px;
              font-size: 14px;
              border-bottom: 1px solid #f5f5f5;
              padding: 0 10px;
              position: relative;
              cursor: pointer;
              &:hover {
                background: #f5f5f5;
              }
              .right-arrow {
                position: absolute;
                right: 10px;
              }
            }
            .row {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .name {
                img {
                  width: 40px;
                  height: 40px;
                  vertical-align: middle;
                  margin-right: 15px;
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }
    }
    .box-right {
      width: 550px;
      min-height: 100%;
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
        .score {
          position: absolute;
          right: 0;
        }
      }
      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 55px;
      }
    }
  }
}

</style>
